<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      height: 100px;
      margin-top: 10px;
    }
  </style>

</head>

<body>
  <input type="button" value="设置边框" id="btnOne" />
  <input type="button" value="设置文本" id="btnTwo" />
  <div></div>
  <div></div>
  <div></div>
</body>

</html>
<!-- 需求：点击按钮给三个div设置边框和文本 -->
<script>
  //入口函数
  window.onload = function () {
    // 1.获取对应dom元素
    var btnOne = document.getElementById('btn0ne');
    var btnTwo = document.getElementById('btnTwo');
    var divs = document.getElementsByTagName('div')

    btnOne.onclick = function () {
      for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = '1px solid red'
      }
    }
    btnTwo.onclick = function () {
      for (var i = 0; i < divs.length; i++) {
        divs[i].textContent = '我是设置的文本'
      }
    }
  }
  // window.onload = function(){
  //   console.log('我有又一个入口函数');
  // }
// js原生的写法缺点
// 1.代码长
// 2.不能声明多个入口函数
// 3.容错差，有一个报错就会影响后面的代码
// 4.代码冗余




</script>